<!--
 * @Description: 日期开始结束组件
-->
<template>
  <div class="_ehl_year_picker">
    <el-date-picker
      type="year"
      size="small"
      style="width: 100px"
      placeholder="开始年份"
      value-format="yyyy"
      :picker-options="pickerOptions"
      v-model="start"
      @change="handleClick"
    >
    </el-date-picker>
    <div class="_ehl_year_picker_devide">至</div>
    <el-date-picker
      type="year"
      size="small"
      style="width: 100px; margin-right: 5px"
      placeholder="结束年份"
      value-format="yyyy"
      :picker-options="pickerOptions"
      v-model="end"
      @change="handleClick"
    >
    </el-date-picker>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { DatePicker, Button } from 'element-ui'
  Vue.use(DatePicker)
  Vue.use(Button)
  export default {
    name: 'YearRangePicker',
    components: {},
    props: {
      pickerOptions: { type: Object, default: () => {} },
    },
    data() {
      return {
        start: null,
        end: null,
      }
    },
    created() {},
    methods: {
      handleClick() {
        let start = this.start
        let end = this.end
        if (start && end) {
          if (start > end) {
            let aaa = start
            this.start = end
            this.end = aaa
            this.$emit('input', [end, start])
          } else {
            this.$emit('input', [start, end])
          }
        }
      },
    },
  }
</script>
<style lang="less" scoped>
  ._ehl_year_picker {
    display: flex;
    align-items: center;
    width: 100%;

    .el-date-editor {
      flex-grow: 1;
    }

    ._ehl_year_picker_devide {
      flex-shrink: 0;
      margin: 0 5px;
    }
  }
</style>
